<template>
    <van-loading type="spinner" size="30px" vertical color="#1989fa" v-if="!goods_info" class="spinner">
        加载中.....
    </van-loading>

    <div v-if="goods_info">
        <div class="header" ref="header">
            <div class="back_btn" ref="back_btn" @click="back_step">
                <van-icon name="arrow-left" size="30px" color="white" />
            </div>

            <span ref="title" class="header_title">商品详情</span>
        </div>
        <div class="container" style="height: 100vh;  overflow: scroll;" @scroll.passive="xxx($event)">
            <div class="goods">
                <div class="swiper" ref="swiper">
                    <van-swipe :autoplay="3000" lazy-render style="height: 100%;" class="my-swipe">
                        <van-swipe-item v-for="(img,index) in images.image" :key="index" @click="preview_img(index)">
                            <img :src="img" style="height: 100%; width: 100vw;" />
                        </van-swipe-item>
                        <template #indicator="{ active, total }">
                            <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
                        </template>
                    </van-swipe>
                </div>
                <div class="goods_info">
                    <div class="goods_price" v-show="!is_select"><span style="font-size: 10px;">￥<span
                                style="font-size: 20px;">{{goods_info.l_price}} ~ {{goods_info.h_price}}</span></span>
                    </div>
                    <div class="goods_price" v-show="is_select"><span style="font-size: 10px;">￥<span
                                style="font-size: 20px;">{{is_select.price}}</span></span>
                    </div>
                    <div class="goods_info_mid">
                        <div class="goods_title">
                            {{goods_info.title}}
                        </div>
                        <div class="collect_icon">
                            <van-icon name="like-o" size="25px" v-show="!is_like" @click="shoucang_fn" />
                            <van-icon name="like" size="25px" color="red" v-show="is_like" @click="shoucang_fn" />
                            <div style="font-size: 10px;">收藏</div>
                        </div>
                    </div>
                    <div class="goods_info_bottom">
                        <div class="kuaidi">
                            <span>快递：</span>
                            {{goods_info.kuaidi}}
                        </div>
                        <div class="sell_num">
                            <span>销量：</span>
                            {{goods_info.sell}}
                        </div>
                        <div class="address">
                            {{goods_info.area}}
                        </div>
                    </div>
                </div>
            </div>
            <div class="choice_type" @click="show_popup(3)">
                <span>
                    <span style="color: gray; padding: 0 10px; ">选择</span>
                    <span>{{is_select == '' ? '请选择商品属性' : is_select.content}}</span>
                </span>
                <van-icon name="arrow" />
            </div>
            <div class="pingjia">
                <div class="red_border" @click="go_pingjia">商品评价(3)</div>
                <span style="color:#969799;" v-if="false">暂无评价</span>
                <div class="message" v-for="item in 3">
                    <div class="user_info">
                        <div class="user_img"></div>
                        <div class="user_name">你是蟋蟀的弟弟草率么</div>
                    </div>
                    <div class="message_content">很好，非常棒！！蜂花护发素</div>
                </div>
            </div>
            <div class="goods_detail">
                <div class="goods_detail_title">
                    ———— 商品详细 ————
                </div>
                <div v-for="item in goods_info.goods_imgs">
                    <img style="width: 100vw;" :src=item.path>
                </div>
            </div>
        </div>
        <div class="foot">
            <van-action-bar>
                <van-action-bar-icon icon="service-o" text="客服" />
                <van-action-bar-button type="warning" text="加入购物车" @click="show_popup(1)" />
                <van-action-bar-button color="red" type="danger" text="立即购买" @click="show_popup(2)" />
            </van-action-bar>
        </div>
        <div class="shopping_cart" @click="skip_myCart">
            <van-icon name="shopping-cart-o" size="40" color="#ffff" />
        </div>
        <div class="back_shoye" @click="skip_shouye">
            <van-icon name="back-top" size="30" color="#ffff" />
            <div class="zi">回首页</div>
        </div>
    </div>

    <van-popup v-model:show="show" closeable position="bottom" :style="{ height: '70%' }">
        <div class="pop_goods">
            <div class="pop_goods_info">
                <div class="goods_info_img">
                    <img :src="is_select?actived_img:images.image[0]" />
                </div>
                <div class="selected_goods_info">
                    <div class="selected_price" v-show="is_select">
                        <span style="color: red; font-size: 14px;">￥<span
                                style="font-size: 24px;">{{is_select.price}}</span></span>
                        <span style="padding-left: 5vw; color: #969799;">库存{{is_select.num}}</span>
                    </div>
                    <div class="selected_price" v-show="!is_select">
                        <span style="color: red; font-size: 14px;">￥<span
                                style="font-size: 24px;">{{goods_info.l_price}} ~ {{goods_info.h_price}}</span></span>
                    </div>
                    <div class="selected" v-show="!is_select" style="padding: 2vh 3vw;">请选择商品属性</div>
                    <div class="selected" v-show="is_select" style="padding: 2vh 3vw;">已选 {{is_select.content}}</div>
                </div>
            </div>
            <span style="padding: 3vw; color:#969799">材料包</span>
            <div class="pop_select_cailiao" ref="clbs">
                <!-- <span class="cailiaobao_active">材料包材料包材料包</span> -->
                <span class="cailiaobao" v-for="item in goods_info.caiLiao"
                    @click="select_clb($event,item)">{{item.content}}</span>
            </div>
            <div class="pop_select_num">
                <span style="color: #969799;">数量</span>
                <van-stepper v-model="select_number" />
            </div>
        </div>
        <div class="pop_confirm_btn">
            <van-action-bar v-if="btn_active == 3">
                <van-action-bar-button type="warning" text="加入购物车" @click="confirm_btn(1)" />
                <van-action-bar-button color="red" type="danger" text="立即购买" @click="confirm_btn(2)" />
            </van-action-bar>
            <van-button v-else round type="danger" block class="confirm_btn_pop" @click="confirm_btn">确定</van-button>
        </div>
    </van-popup>

    <!-- 轮播图图片预览 -->
    <VanImagePreview>

    </VanImagePreview>
</template>
    
<script setup lang='ts'>
import { Toast } from "vant";
import { onMounted, ref, reactive, watch, computed } from "vue";
import { useRoute, useRouter } from "vue-router"
import { ImagePreview } from 'vant';
import 'vant/es/toast/style';
import Product from "@/api/main";
import { useMainStore } from '@/store';
//轮播图预览
import 'vant/es/image-preview/style';


//pinia
const my_store = useMainStore()
const my_cart = my_store.cart


const VanImagePreview = ImagePreview.Component;
//axios
const _product = new Product()
const Route = useRoute()
const Router = useRouter()
//轮播
let images: any = reactive({ image: [] });
let goods_info: any = ref('')

onMounted(() => {

    _product.getAllGoods({
        goods_id: Route.query.id
    }).then(res => {

        let img_arr = []
        for (let i = 0; i < res.data.allData[0].goods_imgs.length; i++) {
            img_arr.push(res.data.allData[0].goods_imgs[i].path)
        }
        res.data.allData[0].l_price = res.data.allData[0].caiLiao[0].price - 0
        res.data.allData[0].h_price = res.data.allData[0].caiLiao[0].price - 0
        for (let i = 0; i < res.data.allData[0].caiLiao.length; i++) {
            if (res.data.allData[0].caiLiao[i].price - 0 < res.data.allData[0].l_price) {
                res.data.allData[0].l_price = (res.data.allData[0].caiLiao[i].price - 0).toFixed(2)
            }
            if (res.data.allData[0].caiLiao[i].price - 0 > res.data.allData[0].h_price) {
                res.data.allData[0].h_price = (res.data.allData[0].caiLiao[i].price - 0).toFixed(2)
            }

        }
        goods_info.value = res.data.allData[0]
        images.image = img_arr
    })

})



//轮播图预览点击事件
function preview_img(cc: any) {
    ImagePreview({
        images: images.image,
        startPosition: cc,
    });
}
let title: any = ref(null)
let header: any = ref(null)
let back_btn: any = ref(null)
let swiper: any = ref(null)

let clbs: any = ref(null)
//控制popup
let show = ref(false)
let btn_active = ref(0)
//选择的数量
let select_number = ref(1)
//是否选择材料包
let is_select: any = ref('')
let is_like = ref(false)

//跳转事件
function back_step() {
    Router.go(-1)
}
function skip_myCart() {
    Router.push('/my_cart')
}
function skip_shouye() {
    Router.push('/')
}

//选中的材料包换类名
function select_clb(e: any, cc: any) {

    let clb_arr = clbs.value.children
    if (e.target.className == 'cailiaobao_active') {
        for (let i = 0; i < clb_arr.length; i++) {
            clb_arr[i].className = "cailiaobao"
        }
        is_select.value = ''
    } else {
        for (let i = 0; i < clb_arr.length; i++) {
            clb_arr[i].className = "cailiaobao"
        }
        e.target.className = "cailiaobao_active"
        is_select.value = cc
    }
}

function go_pingjia() {
    Router.push({
        path: '/pingjia',
        query: {
            id: 111
        }
    })
}

//监听滚动事件
function xxx(e: any) {
    let color = e.target.scrollTop / 333
    title.value.style.color = ` rgba(0, 0, 0, ${color})`
    back_btn.value.style.backgroundColor = ` rgba(0, 0, 0, ${0.5 - color})`
    if (color >= 0.5) {
        back_btn.value.children[0].style.color = 'black'
    } else {
        back_btn.value.children[0].style.color = 'white'
    }

    if (color > 0.2) {
        header.value.style.backgroundColor = ` rgba(255,255, 255, ${color})`
    } else {
        header.value.style.backgroundColor = ` rgba(255,255, 255, 0)`
    }
}

//控制popup
function show_popup(cc: any) {
    show.value = true
    btn_active.value = cc
}

//确定点击事件
function confirm_btn(cc: any) {
    if (!is_select.value) {
        Toast('请选择一种材料包')
        return
    }

    show.value = false

    if (btn_active.value == 1 || cc == 1) {
        //加入购物车
        let selected = {
            goods_id: goods_info.value.id,
            goods_title: goods_info.value.title,
            goods_cailiao: is_select.value.content,
            goods_price: is_select.value.price,
            goods_img: actived_img.value,
            goods_num: select_number.value,
            goods_kuaidi: goods_info.value.kuaidi,
            cailiao_id: is_select.value.id
        }
        _product.addCart(selected).then(res => {
            Toast.success({
                message: res.data.msg,
                duration: 2000
            })
        })
    } else if (btn_active.value == 2 || cc == 2) {
        //立即购买
        Router.push({
            path: '/order',
            query: {
                goods_id: goods_info.value.id,
                goods_title: goods_info.value.title,
                goods_cailiao: is_select.value.content,
                goods_price: is_select.value.price,
                goods_img: actived_img.value,
                goods_num: select_number.value,
                goods_kuaidi: goods_info.value.kuaidi,
                cailiao_id: is_select.value.id
            }
        })
    }
}


let actived_img = computed(() => {
    if (is_select.value) {
        let cailiao_arr = goods_info.value.cailiao_img
        for (let i = 0; i < cailiao_arr.length; i++) {
            if (cailiao_arr[i].id == is_select.value.id)
                return cailiao_arr[i].path
        }
    } else {
        return ''
    }
})



//喜欢的点击事件
function shoucang_fn() {
    is_like.value = !is_like.value
}
</script>
    

<style scoped>
.spinner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%);
}

.container {
    background-color: #ebedf0;
}

.choice_type {
    margin: 2vh 0px;
    padding: 2vh 2vw;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
}

.pingjia {
    padding: 5px 10px;
    background-color: #fff;
    margin-bottom: 2vh;
}

.red_border {
    border-left: 4px solid red;
    padding-left: 15px;
}

.pingjia>span {
    display: inline-block;
    padding: 15px 0;
}

.goods_detail {
    background-color: #fff;
}

.swiper {
    height: 50vh;
}

.custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 4px 10px;
    font-size: 16px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 35%;
}

.goods_info_mid {
    display: flex;
    justify-content: space-around;
}

.collect_icon {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    color: #969799;
}

.goods_info_bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 17px 14px 0 14px;
    color: #969799;
}

.goods_price {
    padding: 10px 5px;
    color: red;
}

.goods {
    background-color: #fff;
    padding-bottom: 2vh;
}

.goods_detail_title {
    padding: 2vh 0;
    color: #969799;
    text-align: center;
}

.goods_title {
    width: 80vw;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.back_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.5);
    margin: 10px 10px;

}

.foot {
    width: 100vw;
    position: fixed;
    bottom: 0px;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    height: 10vh;
    width: 100vw;
    background-color: rgba(0, 0, 0, 0);
    color: rgba(0, 0, 0, 0);
    z-index: 999;
}

.header_title {
    padding-right: 42vw;
}

.goods_detail>div:last-child {
    padding-bottom: 10vh;
}

.shopping_cart {
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.4;
    width: 8vh;
    height: 8vh;
    background-color: black;
    position: fixed;
    bottom: 10vh;
    right: 5vw;
}

.back_shoye {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    width: 8vh;
    height: 8vh;
    background-color: black;
    position: fixed;
    bottom: 20vh;
    right: 5vw;
    opacity: 0.4;
}

.zi {
    color: #fff;
    font-size: 12px;
}

.pop_confirm_btn {
    position: fixed;
    bottom: 0;
}

.confirm_btn_pop {
    width: 90vw;
    margin: 0 0 2vw 5vw;
}

.pop_goods {
    width: 100vw;
    height: 40vh;

}

.pop_goods_info {
    display: flex;
    height: 20vh;

}


.pop_select_num {
    padding: 0 3vw;
    height: 5vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.goods_info_img>img {
    padding: 3vw;
    width: 17vh;
    height: 17vh;
}

.selected_price {
    padding-top: 5vw;
}

.cailiaobao {
    display: inline-block;
    margin: 2vw;
    padding: 2vw;
    background-color: #eee;
}

.cailiaobao_active {
    display: inline-block;
    margin: 2vw;
    padding: 2vw;
    background-color: pink;
    color: red;
}

.user_img {
    width: 7vw;
    height: 7vw;
    border-radius: 50%;
    background-color: red;
    margin-right: 2vw;
}

.user_info {
    display: flex;
    align-items: center;
    margin-bottom: 2vw;
}

.message {
    padding: 15px 0;
}

.message_content {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
</style>